/*
* @Author: yanxiaoli
* @Date:   2018-10-25 16:52:05
* @Last Modified by:   yanxiaoli
* @Last Modified time: 2018-10-29 17:21:25
*/

//--------------------- 缩略图滚动 ---------------------//
$(".jCarouselLite").jCarouselLite({
    btnNext: "#btnNext",
    btnPrev: "#btnPrev",
    scroll: 1,
    speed: 240,
    circular: false,
    visible: 4
});

var currentImage;
var currentIndex = -1;

//显示大图(参数index从0开始计数)
function showImage(index){

    //更新当前图片页码
    $(".CounterCurrent").html(index + 1);

    //隐藏或显示向左向右鼠标手势
    var len = $('#OriginalPic img').length;
    if(index == len - 1){
        $("#aNext").hide();
    }else{
        $("#aNext").show();
    }

    if(index == 0){
        $("#aPrev").hide();
    }else{
        $("#aPrev").show();
    }

    //显示大图            
    if(index < $('#OriginalPic img').length){
        var indexImage = $('#OriginalPic p')[index];

        //隐藏当前的图
        if(currentImage){
            if(currentImage != indexImage){
                $(currentImage).css('z-index', 2);  
                $(currentImage).fadeOut(0,function(){
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }

        //显示用户选择的图
        $(indexImage).show().css({'opacity': 0.4});
        $(indexImage).animate({opacity:1},{duration:200});

        //更新变量
        currentImage = indexImage;
        currentIndex = index;

        //移除并添加高亮
        $('#ThumbPic img').removeClass('active');
        $($('#ThumbPic img')[index]).addClass('active');                 
    }
}

//下一张
function ShowNext(){
    var len = $('#OriginalPic img').length;
    var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
    showImage(next);
}

//上一张
function ShowPrep(){
    var len = $('#OriginalPic img').length;
    var next = currentIndex == 0 ? (len - 1) : currentIndex - 1;
    showImage(next);
}

//下一张事件
$("#aNext").click(function(){
    ShowNext();
    if($(".active").position().left >= 126 * 3){
        $("#btnNext").click();
    }
});

//上一张事件
$("#aPrev").click(function(){
    ShowPrep();
    if($(".active").position().left <= 126 * 3){
        $("#btnPrev").click();
    }
});


//初始化事件
$(".OriginalPicBorder").ready(function(){
    ShowNext();

    //绑定缩略图点击事件
    $('#ThumbPic li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count) - 1);
    });
});

//--------------------- 走势图 TAB ---------------------//
$(".zsTit a").click(function(){
    var index=$(".zsTit a").index($(this));
    $(this).addClass("cur").siblings().removeClass("cur");
    $(".pg_content").addClass("hidden").eq(index).removeClass("hidden");
});
// 初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('pg_content_zs1'), 'walden');
      var myChart2 = echarts.init(document.getElementById('pg_content_zs2'), 'walden');
      var myChart3 = echarts.init(document.getElementById('pg_content_zs3'), 'walden');
      var myChart4 = echarts.init(document.getElementById('pg_content_zs4'), 'walden');
     // 指定图表的配置项和数据
      var option1 = {   
          calculable : true,
          tooltip : {
              trigger: 'axis'
          },
          grid: { y: 40, x2: 24, y2: 50, x: 70 }, //坐标撑满
          xAxis : [
              {
                  type : 'category',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格纵线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //X轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#999', //X轴文本的颜色
                        fontSize: 14
                      }

                  },
                  boundaryGap : false,
                  data : ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日']
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格横线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //Y轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value} 元',
                      textStyle: {
                        color: '#999', //Y轴文本的颜色
                        fontSize: 14
                      }
                  }
              }
          ],
          
          series : [
              {
                  name:'价格',
                  type:'line',
                  smooth:true,
                  symbol: 'circle',      //设定为实心点
                  symbolSize: 8,        //设定为实心点的大小
                  itemStyle: {
                      normal: {
                          color:'#2299FB',
                          lineStyle: {
                              shadowColor : 'rgba(0,0,0,0.4)',
                              color:'#2299FB'
                          }
                      }
                  },
                  data:[ 4600, 4800, 4800, 7688, 5690, 5690, 4800]
              }
          ]
      };                          
      var option2 = {   
          calculable : true,
          tooltip : {
              trigger: 'axis'
          },
          grid: { y: 40, x2: 24, y2: 50, x: 70 }, //坐标撑满
          xAxis : [
              {
                  type : 'category',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格纵线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //X轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#999', //X轴文本的颜色
                        fontSize: 14
                      }

                  },
                  boundaryGap : false,
                  data : ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日']
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格横线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //Y轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value} 元',
                      textStyle: {
                        color: '#999', //Y轴文本的颜色
                        fontSize: 14
                      }
                  }
              }
          ],
          
          series : [
              {
                  name:'价格',
                  type:'line',
                  smooth:true,
                  symbol: 'circle',      //设定为实心点
                  symbolSize: 8,        //设定为实心点的大小
                  itemStyle: {
                      normal: {
                          color:'#2299FB',
                          lineStyle: {
                              shadowColor : 'rgba(0,0,0,0.4)',
                              color:'#2299FB'
                          }
                      }
                  },
                  data:[ 1600, 5800, 14800, 17688, 3690, 15690, 14800]
              }
          ]
      };
      var option3 = {   
          calculable : true,
          tooltip : {
              trigger: 'axis'
          },
          grid: { y: 40, x2: 24, y2: 50, x: 70 }, //坐标撑满
          xAxis : [
              {
                  type : 'category',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格纵线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //X轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#999', //X轴文本的颜色
                        fontSize: 14
                      }

                  },
                  boundaryGap : false,
                  data : ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日']
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格横线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //Y轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value} 元',
                      textStyle: {
                        color: '#999', //Y轴文本的颜色
                        fontSize: 14
                      }
                  }
              }
          ],
          
          series : [
              {
                  name:'价格',
                  type:'line',
                  smooth:true,
                  symbol: 'circle',      //设定为实心点
                  symbolSize: 8,        //设定为实心点的大小
                  itemStyle: {
                      normal: {
                          color:'#2299FB',
                          lineStyle: {
                              shadowColor : 'rgba(0,0,0,0.4)',
                              color:'#2299FB'
                          }
                      }
                  },
                  data:[ 4600, 4800, 14800, 57688, 15690, 5690, 4800]
              }
          ]
      };
      var option4 = {   
          calculable : true,
          tooltip : {
              trigger: 'axis'
          },
          grid: { y: 40, x2: 24, y2: 50, x: 70 }, //坐标撑满
          xAxis : [
              {
                  type : 'category',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格纵线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //X轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#999', //X轴文本的颜色
                        fontSize: 14
                      }

                  },
                  boundaryGap : false,
                  data : ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日']
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  splitLine:{
                    lineStyle:{
                      color:['#eee']   //网格横线的颜色
                    }
                  },
                  axisLine : {
                    lineStyle:{
                      color:'#eee', //Y轴线的颜色
                      width:1
                    }
                  },
                  axisLabel : {
                      formatter: '{value} 元',
                      textStyle: {
                        color: '#999', //Y轴文本的颜色
                        fontSize: 14
                      }
                  }
              }
          ],
          
          series : [
              {
                  name:'价格',
                  type:'line',
                  smooth:true,
                  symbol: 'circle',      //设定为实心点
                  symbolSize: 8,        //设定为实心点的大小
                  itemStyle: {
                      normal: {
                          color:'#2299FB',
                          lineStyle: {
                              shadowColor : 'rgba(0,0,0,0.4)',
                              color:'#2299FB'
                          }
                      }
                  },
                  data:[ 14600, 14800, 14800, 7688, 5690, 15690, 4800]
              }
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);           

//--------------------- 列表 TAB ---------------------//
  $(".jlTit a").click(function(){
    $(this).addClass("cur").siblings().removeClass("cur");
    $(".jiulList").hide().eq($(this).index()).show();
  })

//--------------------- 周边配套 TAB ---------------------//

      // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(118.961472, 32.059698), 15);

      var myKeys = ["公交","地铁","教育设施","医院","银行","休闲娱乐","购物","餐饮","运动"];

      var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map, panel:"r-result"},
        pageCapacity:5
      });
     

      $(".addressTit a").click(function(){
         $(this).addClass("cur").siblings().removeClass("cur");   
      });
      
      $('#transit').click(function(){
         $(".z-resultTit").text("公交");
         local.searchInBounds(myKeys[0], map.getBounds());
      });
      $('#subway').click(function(){
         $(".z-resultTit").text("地铁");
         local.searchInBounds(myKeys[1], map.getBounds());
      });
      $('#education').click(function(){
         $(".z-resultTit").text("教育设施");
         local.searchInBounds(myKeys[2], map.getBounds());
      });
      $('#hospital').click(function(){
         $(".z-resultTit").text("医院");
         local.searchInBounds(myKeys[3], map.getBounds());
      });
      $('#bank').click(function(){
         $(".z-resultTit").text("银行");
         local.searchInBounds(myKeys[4], map.getBounds());
      });
      $('#leisure').click(function(){
         $(".z-resultTit").text("休闲娱乐");
         local.searchInBounds(myKeys[5], map.getBounds());
      });
      $('#shopping').click(function(){
         $(".z-resultTit").text("购物");
         local.searchInBounds(myKeys[6], map.getBounds());
      });
      $('#restaurant').click(function(){
         $(".z-resultTit").text("餐饮");
         local.searchInBounds(myKeys[7], map.getBounds());
      });
      $('#sport').click(function(){
         $(".z-resultTit").text("运动健身");
         local.searchInBounds(myKeys[8], map.getBounds());
      });
  

      local.searchInBounds(myKeys[0], map.getBounds());

      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);